<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <style>
        h4,
        h5,
        h6 {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #eeeeee;
            margin-top: 0;
        }

        /* 通栏 */
        #top {
            height: 50px;
            box-shadow: 0 0 2px #888888;
        }

        /* 留言标题 */
        #title {
            width: 600px;
            height: 70px;
            background-color: white;
            margin: 0 auto;
            padding: 10px 10px;
            box-shadow: 0 0 2px #888888;
        }

        .title_input {
            margin-top: 15px;
            width: 590px;
            height: 20px;
            border: 2px solid transparent;
            border-bottom: 1px solid black;
        }

        /* 留言内容 */
        #content {
            width: 600px;
            height: 160px;
            background-color: white;
            margin: 20px auto;
            padding: 10px 10px;
            box-shadow: 0 0 2px #888888;

        }

        .content_textarea {
            margin-top: 15px;
            width: 590px;
            height: 110px;
            border: 2px solid transparent;
            border-bottom: 1px solid #000;
        }

        /* 提交按钮 */
        .sub_button {
            width: 160px;
            height: 20px;
            margin: 20px auto;
            text-align: center;
            border-radius: 4px;
            font-size: 12px;
            color: #fff;
        }

        /* 留言显示 */
        .show_msg {
            width: 620px;
            margin: 10px auto 0;
            background-color: #fff;
            display: flex;
            flex-direction: column;
        }

        ul {
            list-style: none;
            padding: 0;
            font-size: 12px;
        }

        .title {
            color: #000;
            padding: 10px 5px 5px 5px;
        }

        .content {
            color: #939393;
            padding: 0 8px;
        }

        .date {
            text-align: right;
            margin-right: 5px;
        }

        .error {
            color: red;
            font-size: 10px;
        }
    </style>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        window.onload = function () {
            const {createApp, ref} = Vue
            createApp({
                setup() {
                    //主题修改
                    const topColor = ref("#4ba6ee")

                    //ajax获得留言信息列表
                    const params = ref({
                        _sort: "id",
                        _order: "desc",
                        _page: 1,
                        _limit: 5
                    })
                    const messageList = ref([])
                    let getData = () => {
                        axios.get("http://localhost:3000/messages",{params:params.value}).then(response =>{
                            console.log(response)
                            //倒序展示数据
                            if(response.status === 200){
                                if (response.data.length === 0) {
                                    params.value._page--
                                    return
                                }
                                messageList.value = response.data
                            }
                        })
                    }
                    getData()

                    //上一页
                    const prev = () => {
                        if (params.value._page > 1)
                            params.value._page--
                        getData()
                    }

                    //下一页
                    const next = () => {
                        params.value._page++
                        getData()
                    }

                    //表单提交
                    const formData = ref({
                        title: "",
                        content: "",
                        createTime: new Date()
                    });
                    const submit = () => {
                        axios.post("http://localhost:3000/messages",formData.value).then(response =>{
                            console.log('Success:', response.data)
                            formData.value.title = ""
                            formData.value.content = ""
                            getData()
                        })
                    }

                    //使用watch实现表单验证


                    return {
                        messageList, formData, topColor, prev, next, submit
                    }
                }
            }).mount('#app')


        }
    </script>

</head>

<body>
<div id="app">
    <form id="myForm">
        <!-- 通栏 -->
        <div id="top" :style="'background-color:'+topColor"></div>
        <!-- 留言标题 -->
        <div id="title"><input type="color" v-model="topColor" style="float: right;">
            <h4>留言标题</h4>
            <div class="error">{{errorTitle}}</div>
            <input v-model="formData.title" class="title_input" type="text" placeholder="给我们来点建议吧"/>
        </div>
        <!-- 留言内容 -->
        <div id="content">
            <h4>留言内容</h4>
            <div class="error">{{errorContent}}</div>
            <textarea class="content_textarea" v-model="formData.content"></textarea>
        </div>
        <div id="page" style="float: right; font-size: 12px; margin-right: 400px;">
            <span style="margin-right: 10px;" @click="prev()">上一页</span><span @click="next()">下一页</span></div>
        <!-- 提交按钮 -->
        <div class="sub_button" :style="'background-color:'+topColor" @click="submit()">提交</div>

    </form>

    <!-- 显示留言 -->
    <div class="show_msg">
        <ul v-for="message in messageList">
            <li style="margin:10px 10px 0 0; float: right;">#{{message.id}}</li>
            <li class="title">{{message.title}}</li>
            <li class="content">{{message.content}}</li>
            <li class="date">{{message.createTime}}</li>
        </ul>
    </div>
</div>
</body>

</html>
